<template>
	<view>
		<view class="webkit list">
			<view class="left">订单编号</view>
			<view class="flex" style="text-align: right;" v-cloak> {{ordersn}}</view>
		</view>
		<view class="webkit list">
			<view class="left">订单总金额</view>
			<view class="flex" style="text-align: right;color: #f55;" v-cloak>￥{{price}}</view>
		</view>
		<view class="webkit list" v-if="jfdk>0">
			<view class="left">当前订单需要的积分</view>
			<view class="flex" style="text-align: right;color: #f55;" v-cloak>￥{{jfdk}}</view>
		</view>
		<view class="webkit list" v-if="jfdk>0">
			<view class="left">我剩余的积分</view>
			<view class="flex" style="text-align: right;color: #f55;" v-cloak>￥{{credit1}}</view>
		</view>
		<!-- <view class="webkit list">
			<view class="left">最终支付</view>
			<view class="flex">
				<rich-text :nodes="str"></rich-text>
			</view>
		</view> -->
		<!-- <view class="box" style="padding: 48upx 24upx;">
			<button type="warn" v-if="res.zhifu == 1" @click="jump" v-cloak>{{res.buzu}}</button>
			<button type="warn" v-else @click="submit">确认支付</button>
		</view>
		<view style="padding: 28upx 24upx;">
			<button type="warn" v-if="res.zhifu == 2" @click="zfbPay" v-cloak>{{res.buzu}}</button>
			<button type="warn" v-else @click="submit">支付宝支付</button>
		</view>
		<view class="webkit list">
			<view class="left">当前余额</view>
			<view class="flex" style="text-align: right;" v-cloak>￥{{credit2}}</view>
		</view>
		<view class="webkit list" v-for="(item,i) in res.coins" :key="i">
			<view class="left" v-cloak>{{item.coinname}}剩余数量</view>
			<view class="flex" style="text-align: right;" v-cloak>{{item.pirce}}</view>
		</view> -->
		<view style="background-color: #ffffff;margin-top: 20upx;">
			<view style="height: 140upx;display: flex;border-bottom: 2upx solid #dddddd;" @click="zfbPay" v-if="res.istihuo == 0">
				<view style="width: 160upx;position: relative;">
					<image src="../../../static/zhifubao.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
					<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
				</view>
				<view style="width: 500upx;margin-left: 30upx;">
					<view style="height: 70upx;font-size: 36upx;font-weight: 555;">支付宝支付</view>
					<view style="height: 70upx;color: #ccc;">支付宝安全支付</view>
				</view>
			</view>
			<!-- <view style="height: 140upx;display: flex;border-bottom: 2upx solid #dddddd;" @click="weiXinPay">
				<view style="width: 160upx;position: relative;">
					<image src="../../../static/weixindenglu_1.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
					<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
				</view>
				<view style="width: 500upx;margin-left: 30upx;">
					<view style="height: 70upx;font-size: 36upx;font-weight: 555;">微信支付</view>
					<view style="height: 70upx;color: #ccc;">微信安全支付</view>
				</view>
			</view> -->
			<view v-if="res.istihuo == 0">
				<view style="height: 140upx;display: flex;border-bottom: 2upx solid #dddddd;" v-if="res.zhifu == 1" @click="jump">
					<view style="width: 160upx;position: relative;">
						<image src="../../../static/yue_1.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
						<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
					</view>
					<view style="width: 500upx;margin-left: 30upx;">
						<view style="height: 70upx;font-size: 36upx;font-weight: 555;">余额支付</view>
						<view style="height: 70upx;color: #ccc;">当前余额:<text style="color: #FF3333;padding-left: 20upx;">{{credit2}}</text></view>
					</view>
				</view>
				<view style="height: 140upx;display: flex;border-bottom: 2upx solid #dddddd;" v-else @click="submit('credit')" >
					<view style="width: 160upx;position: relative;">
						<image src="../../../static/yue_1.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
						<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
					</view>
					<view style="width: 500upx;margin-left: 30upx;">
						<view style="height: 70upx;font-size: 36upx;font-weight: 555;">余额支付</view>
						<view style="height: 70upx;color: #ccc;">当前余额:<text style="color: #FF3333;padding-left: 20upx;">{{credit2}}</text></view>
					</view>
				</view>
			</view>
			<view style="height: 140upx;display: flex;" @click="submit('tihuoquan')" v-if="res.istihuo == 1">
				<view style="width: 160upx;position: relative;">
					<image src="../../../static/yue_1.png" style="width: 100upx;height: 100upx;margin: 20upx 0 0 30upx;"></image>
					<view style="position: absolute;border: 2upx solid #dddddd;right: 0;top: 30upx;z-index: 33;height: 80upx;width: 0;"></view>
				</view>
				<view style="width: 500upx;margin-left: 30upx;">
					<view style="height: 70upx;font-size: 36upx;font-weight: 555;">提货券提货</view>
					<view style="height: 70upx;color: #ccc;">当前提货券:<text style="color: #FF3333;padding-left: 20upx;">{{tihuoquan}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				res:[],
				ordersn:'',
				price:'',
				str:'',
				credit2:'',
				openid:"",
				orderid:"",
				credit1:'',
				tihuoquan:'',
				jfdk:'',
			};
		},
		onLoad:function(e){
			uni.showLoading()
			this.orderid = e.id
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods:{
			zfbPay(){
				console.log(this.ordersn)
				console.log(this.price)
				console.log(this.title)
				//请求后台数据 prepay_id paySign nonceStr timeStamp
				uni.request({
					url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.alipay&out_trade_no=' + this.ordersn + '&total_amount=' + this.price + '&goodstitle=' + this.title + '&app=1',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: (res) => {
						console.log(res)
						this.userinfo = res.data
						// 调起支付
						var userinfo = this.userinfo
						var _this = this
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: userinfo, //订单数据
							success: function(res) {
								console.log('支付成功----------------------')
								console.log(res)
								setTimeout(function() {
									_this.alipaymoney()
								}, 10);
							},
							fail: function(err) {
								console.log('支付失败----------------------')
								return
							}
						});
					}
				});
			},
			alipaymoney(){
				uni.navigateTo({
					url: 'success/success?id='+this.orderid+'&result='+ 'sure'
				});
			},
			setAjax(){
				uni.request({
					url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.pay&app=1',
					method: 'POST',
					data: {
						'openid':this.openid,
						'id':this.orderid
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						uni.hideLoading()
						this.ordersn = res.data.order.ordersn
						this.title = res.data.title
						this.res = res.data
						this.credit1 = res.data.member.credit1
						this.tihuoquan = res.data.member.tihuoquan
						this.jfdk = res.data.order.jfdk
						this.str = '<p style="text-align: right;color: #f55;">'+res.data.str+"</p>"
						this.credit2 = Number(res.data.member.credit2).toFixed(2)
						if(res.data.ispeerpay != ''&& res.data.ispeerpay != false){
							this.price = res.data.peerprice.toFixed(2)
						}else{
							this.price = res.data.order.price.toFixed(2)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jump(){
				var k = this.res.creditbuzu;
				console.log(k)
				if(k == 'credit'){
					uni.navigateTo({
						url: '../../coin/recharge'
					});
				}else{
					uni.navigateTo({
						url: '../../coin/detail/detail?coin='+k
					});
					
				}
			},
			submit(e){
				console.log(e)
				// if (Number(this.credit2)<this.price) {
				// 	uni.showModal({
				// 		content: "余额不足",
				// 		confirmText: "确定",
				// 	})
				// 	return
				// }
				uni.showModal({
					content: "确认要支付吗？",
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if(res.confirm){
							uni.request({
								url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&app=1',
								method: 'POST',
								data: {
									openid:this.openid,
									id:this.orderid,
									type:e,
								},
								header:{'Content-Type':'application/x-www-form-urlencoded'},
								success: res => {
									uni.request({
										url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.complete&app=1',
										method: 'POST',
										data: {
											openid:this.openid,
											id:this.orderid,
											type:e,
										},
										header:{'Content-Type':'application/x-www-form-urlencoded'},
										success: res => {
											
											console.log(res)
											if(res.data.status==0){
												uni.showToast({
													title:res.data.result.message
												})
												return
											}
											uni.navigateTo({
												url: 'success/success?id='+this.orderid+'&result='+res.data.result.result
											});
											setTimeout(function() {
												uni.showModal({
													content: "支付成功",
													confirmText: "确定",
												})
											}, 1000);
										},
										fail: () => {},
										complete: () => {}
									});
								},
								fail: () => {},
								complete: () => {}
							});
						}
					},
					
				})
			}
		}
	}
</script>

<style>
.list{    padding: 20upx 24upx;
    border-top: 1px solid #e4e4e4;
    background: #fff;}
.list .left{
	color: #666;
}
</style>
